<template>
  <div class="kada_box aaaaaaaaaa">
    <!-- 大背景图 -->
    <div class="imgBg">
      <Top :type="type"></Top>
      <div class="conter">
        <div class="conter_left">
          <div class="titles1">
            炉门口温度监测
          </div>
          <div class="box left_one">
            <div class=" left_one_top">
              <!-- 设备 -->
              <Equipment></Equipment>
            </div>
            <!-- 参数值 -->
            <div class=" left_one_con">
              <Parameter></Parameter>
            </div>
          </div>
        </div>
        <div class="conter_con">
          <!-- 炉顶温度监测 -->
          <Furnace ref="furnace"></Furnace>
        </div>
        <div class="conter_right">
          <!-- 炉顶内窥摄像机 -->
          <div class="endoscopy box">
            <div class="titles1">
              炉顶内窥摄像机
            </div>
              <div class="pub">
                <div class="status_f">
                    <div class="ones">
                        <img src="@/assets/img/ic_she@2x.png" alt="">
                        <div>
                            <h3 class="biao" > {{ deviceNames }} </h3>
                            <p>设备名称</p>
                        </div>
                    </div>
                    <div class="ones">
                        <img v-if="deviceNames" src="@/assets/img/ic_lian@2x.png" alt="">
                        <img v-else src="@/assets/img/ic_lian_dis@2x.png" alt="">
                        <div>
                            <h3>
                                <span class="sp1" v-if="deviceNames">正常</span>
                                <span class="sp2" v-else>离线</span>
                            </h3>
                            <p>链接状态</p>
                        </div>
                    </div>
                    <div class="ones">
                        <img v-if="deviceNames" src="@/assets/img/ic_zhuang@2x.png" alt="">
                        <img v-else src="@/assets/img/ic_zhuang_dis@2x.png" alt="">
                        <div>
                            <h3>
                                <span class="sp1" v-if="deviceNames">正常</span>
                                <span class="sp2" v-else>未工作</span>
                            </h3>
                            <p>设备状态</p>
                        </div>
                    </div> 
                </div> 
            </div>
            <div class="endoscopy_box pubBorder">
              <span class="sp1"></span>
              <span class="sp2"></span>
              <span class="sp3"></span>
              <span class="sp4"></span>
              <div class="cons">
                <Plugin @getDeviceInfo="getDeviceInfo" ref="child"></Plugin>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import Top from '@/components/layout/top.vue'
import Plugin from './plugin/index.vue' 
import Equipment from './component/equipment.vue'
import Parameter from './component/parameter.vue'
import Furnace from './component/furnace.vue'
import { ref, onBeforeUnmount } from 'vue' 
const type = ref(1) 
// 定义子组件 
const child = ref<InstanceType<typeof Plugin>>() 
onBeforeUnmount(() => {
  if (child.value) {
    child.value.clickStopRealPlay();
  }
})
let deviceNames = ref(null)
function getDeviceInfo(val) { 
  if (val) { 
    deviceNames.value=val 
  } 
}

</script>